import React from 'react'
import {Card,Button,Modal} from 'antd'
import {Editor} from 'react-draft-wysiwyg'
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
import draftjs from 'draftjs-to-html'

export default class RichText extends React.Component{
   state={
    showRichText:false,
    editorState:''
   }
//    状态发生改变时调用的方法 编辑器状态发生改变
   onEditorStateChange=(editorState)=>{
        this.setState({
            editorState,
        })
   }
   handleClearContent=()=>{
      this.setState({
          editorState:''
      })
   }
   handleGetText=()=>{
    this.setState({
        showRichText:true
    })
   }
// 内容发生改变调用的方法 这个参数可能就像e一样
   onContentStateChange=(contentState)=>{
    this.setState({
        contentState//输入文本的内容
    })
   }
    render(){
        const {editorState}=this.state
        return(
            <div>
               <Card>
                   <Button type="primary" onClick={this.handleClearContent} style={{marginRight:10}}>清空内容</Button>
                   <Button type="primary" onClick={this.handleGetText}>获取HTML文本</Button>
               </Card>
               <Card title="富文本编辑器">
                  <Editor
                  editorState={editorState}
                //   toolbarClassName="toolbarClassName"
                //   editorClassName='editorClassName'
                //   wrapperClassName='wrapperClassName'
                  onEditorStateChange={this.onEditorStateChange}
                  onContentStateChange={this.onContentStateChange}
                  />
               </Card>
               <Modal
               title="富文本"
               visible={this.state.showRichText}
               onCancel={()=>{
                   this.setState({
                       showRichText:false
                   })
               }}
               footer={null}
               >
                  {draftjs(this.state.contentState)}
               </Modal>
            </div>
        )
    }
}